// 进度指数
progressIndexJEchart();
function progressIndexJEchart() {
  let progressIndexJE = document.getElementsByClassName("progressIndexJEchart");
  for (var i = 0; i < progressIndexJE.length; i++) {
    let myChartProgress = echarts.init(progressIndexJE[i]);
    var chartData = [0.82, 1.0, 0.5, 6.72];
    var chartData2 = [0.82, 1.01, 0.5375, 7.7];
    var chartData3 = [1.01, 1.01, 1.08, 1.15];
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        top: "13%",
        containLabel: true,
        z: 22,
      },
      legend: {
        data: ["计划量", "完成量", "完成率"],
        top: "5%",
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      xAxis: {
        data: ["10号线二期", "14号线", "15号线", "18号线"],
        axisLine: {
          lineStyle: {
            // type: "dashed",
            color: "#657CA8",
            opacity: 0.1,
          },
        },
        axisLabel: {
          color: "#A2D4E6",
          fontSize: 14,
          margin: 15,
          //   rotate: 45,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#A1A1A1",
            fontSize: 12,
          },
          splitLine: {
            lineStyle: {
              // type: "dashed",
              color: "#657CA8",
              opacity: 0.1,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#A2D4E6",
              fontSize: 14,
            },
            formatter: function (value, index) {
              return value.toFixed(2);
            },
          },
        },
        {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#A1A1A1",
            fontSize: 12,
          },
          position: "right",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#A1A1A1",
              width: 2,
            },
          },
          axisLabel: {
            show: true,
            formatter: function (value, index) {
              return value.toFixed(2);
            },
            textStyle: {
              color: "#A2D4E6",
              fontSize: 14,
            },
          },
        },
      ],
      series: [
        {
          name: "计划量",
          type: "bar",
          barWidth: 30,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#5B9BD5",
                },
                {
                  offset: 1,
                  color: "#5B9BD5",
                },
              ]),
            },
          },
          data: chartData,
        },
        {
          name: "完成量",
          type: "bar",
          barWidth: 30,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#ED7D31",
                },
                {
                  offset: 1,
                  color: "#ED7D31",
                },
              ]),
            },
          },
          data: chartData2,
        },
        {
          name: "完成率",
          type: "line",
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 6, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#1C87EB",
            borderColor: "#1C87EB",
            width: 2,
            shadowColor: "#1C87EB",
            shadowBlur: 2,
          },
          lineStyle: {
            color: "#1C87EB",
            width: 2,
            shadowBlur: 2,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(8,148,239,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(8,148,239,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(8,148,239, 0.9)",
              shadowBlur: 20,
            },
          },
          data: chartData3,
        },
      ],
    };
    myChartProgress.setOption(option);
    window.addEventListener("resize", function () {
      myChartProgress.resize();
    });
  }
}
//风险指数
riskIndexJEchart();
function riskIndexJEchart() {
  let riskIndexJE = document.getElementsByClassName("riskIndexJEchart");
  for (var i = 0; i < riskIndexJE.length; i++) {
    let myChartRiskIndex = echarts.init(riskIndexJE[i]);
    option = {
      tooltip: {
        position: "inside",
        formatter: "小于0.4为正常<br>大于0.4为预警",
        textStyle: {
          fontSize: 10,
        },
      },
      series: [
        {
          name: "刻度",
          type: "gauge",
          center: ["50%", "65%"],
          radius: "75%",
          min: 0, //最小刻度
          max: 0.8, //最大刻度
          splitNumber: 8, //刻度数量
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: [[1, "rgba(0,0,0,0)"]],
            },
          }, //仪表盘轴线
          axisLabel: {
            show: true,
            color: "#0ab7ff",
            fontSize: 15,
            distance: 10,
            formatter: function (v) {
              return v + "";
            },
          }, //刻度标签。
          axisTick: {
            show: true,
            splitNumber: 5,
            lineStyle: {
              color: "#0ab7ff",
              width: 1,
            },
            length: -3,
          }, //刻度样式
          splitLine: {
            show: true,
            length: -5,
            lineStyle: {
              color: "#0ab7ff",
            },
          }, //分隔线样式
        },
        {
          type: "gauge",
          radius: "100%",
          center: ["50%", "65%"],
          splitNumber: 0, //刻度数量
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            show: true,
            lineStyle: {
              width: 30,
              color: [
                [0.5, "#00a65a"],
                [0.75, "#f39c11"],
                [1, "#fa4e4b"],
              ],
            },
          },
          //分隔线样式。
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          pointer: {
            show: true,
            length: "80%",
            width: "2%",
          },
          title: {
            show: true,
            offsetCenter: [0, "50%"], // x, y，单位px
            textStyle: {
              fontWeight: "bold",
              color: "#0ab7ff",
              fontSize: 20,
            },
          },
          //仪表盘详情，用于显示数据。
          detail: {
            show: true,
            offsetCenter: [0, "20%"],
            color: "#ffffff",
            formatter: "{value}",
            textStyle: {
              fontSize: 30,
            },
          },
          data: [
            {
              name: "风险指数",
              value: 0.01,
            },
          ],
        },
        {
          // 仅显示tooltip用
          type: "pie",
          radius: "90%",
          hoverAnimation: true,
          label: {
            normal: {
              show: false,
              position: "center",
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          z: 3,
          zlevel: 0,
          itemStyle: {
            borderWidth: 0,
          },
          data: [
            {
              value: 50,
              name: "",
              label: {
                normal: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
      ],
    };
    myChartRiskIndex.setOption(option);
    window.addEventListener("resize", function () {
      myChartRiskIndex.resize();
    });
  }
}
//线路长度
lineLengthEchart();
function lineLengthEchart() {
  let lineLengthE = document.getElementsByClassName("lineLengthEchart");
  for (var i = 0; i < lineLengthE.length; i++) {
    let myChartLine = echarts.init(lineLengthE[i]);
    var fontColor = "#fff";
    var data = [
      {
        name: "10号线二期",
        value: 9.5,
      },
      {
        name: "14号线",
        value: 39,
      },
      {
        name: "15号线",
        value: 42.3,
      },
      {
        name: "18号线一期",
        value: 36.8,
      },
    ];

    option = {
      color: ["#4187F1", "#F43D3D", "#32E8BF", "#FFCB15"],
      title: {
        text: 127.6,
        subtext: "线路长度(km)",
        textAlign: "center",
        textStyle: {
          color: "#F7F7F7",
          fontSize: 30,
        },
        subtextStyle: {
          fontSize: 18,
          color: "#FFE119",
        },
        x: "50%",
        y: "45%",
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/> {c}  ({d}%)",
      },
      legend: {
        top: "5%",
        textStyle: {
          color: "#A9C7DA",
          fontSize: 14,
        },
        icon: "roundRect",
        data: data,
      },
      series: [
        // 主要展示层的
        {
          radius: ["45%", "65%"],
          center: ["50%", "55%"],
          type: "pie",
          label: {
            position: "inner",
            formatter: "{b}：{c}",
          },
          labelLine: {
            normal: {
              show: true,
              length: 10,
              length2: 45,
            },
            emphasis: {
              show: true,
            },
          },
          data: data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            normal: {
              label: {
                show: true,
                formatter: "{b}:{c}km",
                color: "#fff",
                fontSize: "16",
              },
              labelLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
            },
          },
        },
      ],
    };
    myChartLine.setOption(option);
    window.addEventListener("resize", function () {
      myChartLine.resize();
    });
  }
}
// 车站
stationEchart();
function stationEchart() {
  let stationE = document.getElementsByClassName("stationEchart");
  for (var i = 0; i < stationE.length; i++) {
    let myChart = echarts.init(stationE[i]);

    option = {
      title: {
        text: 93,
        subtext: "总量",
        textAlign: "center",
        textStyle: {
          color: "#FFE119",
          fontSize: 30,
        },
        subtextStyle: {
          fontSize: 16,
          color: "#F7F7F7",
        },
        x: "50%",
        y: "45%",
      },
      legend: {
        // orient: "vertical",
        // top: "center",
        // right: "5%",
        top: "5%",
        data: ["10号线二期", "14号线", "15号线", "18号线一期"],
        textStyle: {
          color: "#A9C7DA",
          fontSize: 14,
        },
      },
      // legend: {
      //   textStyle: {
      //     color: "#f2f2f2",
      //     fontSize: 12,
      //   },
      //   icon: "roundRect",
      //   data: data,
      // },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      series: [
        {
          name: "车站",
          type: "pie",
          radius: ["30%", "65%"],
          center: ["50%", "55%"],
          roseType: "radius",
          label: {
            show: true,
            normal: {
              position: "outside",
              fontSize: 16,
              color: "#fff",
            },
          },
          labelLine: {
            length: 1,
            length2: 20,
            smooth: true,
          },
          data: [
            {
              value: 6,
              name: "10号线二期",
              itemStyle: {
                color: "#32E8BF",
              },
            },
            {
              value: 31,
              name: "14号线",
              itemStyle: {
                color: "#FFCB15",
              },
            },
            {
              value: 30,
              name: "15号线",
              itemStyle: {
                color: "#F43D3D",
              },
            },
            {
              value: 26,
              name: "18号线一期",
              itemStyle: {
                color: "#4187F1",
              },
            },
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            normal: {
              label: {
                show: true,
                formatter: "{b}:{c}座",
                color: "#fff",
                fontSize: "16",
              },
              labelLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
            },
          },
        },
        {
          name: "外边框",
          type: "pie",
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          center: ["50%", "55%"],
          radius: ["70%", "70%"],
          label: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 9,
              name: "",
              itemStyle: {
                type: "dashed",
                normal: {
                  borderWidth: 0.5,
                  borderColor: "#1C65FE",
                  borderStyle: "dashed",
                  lineStyle: {
                    color: "#1C65FE",
                  },
                },
              },
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//投资完成率
investmentCompletionjEchart();
function investmentCompletionjEchart() {
  let investmentCompletionE = document.getElementsByClassName(
    "investmentCompletionjEchart"
  );
  for (var i = 0; i < investmentCompletionE.length; i++) {
    let myChartInvestment = echarts.init(investmentCompletionE[i]);
    option = {
      title: {
        text: "完成投资占比",
        textStyle: {
          color: "#A9C7DA",
          fontSize: 14,
        },
        subtext: "62.39%",
        subtextStyle: {
          color: "#A9C7DA",
          fontSize: 30,
        },
        itemGap: 20, // 主副标题距离
        left: "center",
        top: "center",
      },
      legend: {
        show: true,
        itemGap: 12,
        data: ["完成投资", "总投资"],
      },
      angleAxis: {
        max: 100, // 满分
        clockwise: false, // 逆时针
        // 隐藏刻度线
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      radiusAxis: {
        type: "category",
        // 隐藏刻度线
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      polar: {
        center: ["50%", "55%"],
        radius: ["80%", "45%"], //图形大小
      },
      series: [
        {
          type: "bar",
          data: [
            {
              name: "完成投资",
              value: 72,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: "#FF6E02",
                    },
                    {
                      offset: 1,
                      color: "#FFFF00",
                    },
                  ]),
                },
              },
            },
          ],
          coordinateSystem: "polar",
          roundCap: true,
          barWidth: "50%",
          barGap: "-100%", // 两环重叠
          z: 2,
        },
        {
          // 灰色环
          type: "bar",
          data: [
            {
              name: "总投资",
              value: 100,
              itemStyle: {
                color: "#e2e2e2",
                // shadowColor: "rgba(0, 0, 0, 0.2)",
                // shadowBlur: 5,
                // shadowOffsetY: 2,
                opacity: 1,
              },
            },
          ],
          coordinateSystem: "polar",
          roundCap: true,
          barWidth: "50%",
          barGap: "-100%", // 两环重叠
          z: 1,
        },
      ],
    };
    myChartInvestment.setOption(option);
    window.addEventListener("resize", function () {
      myChartInvestment.resize();
    });
  }
}
//盾构区间
shieldIntervalEchart();
function shieldIntervalEchart() {
  let shieldIntervalE = document.getElementsByClassName("shieldIntervalEchart");
  for (var i = 0; i < shieldIntervalE.length; i++) {
    let myChartShield = echarts.init(shieldIntervalE[i]);
    option = {
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        top: "13%",
        containLabel: true,
        z: 22,
      },
      xAxis: [
        {
          show: true,
          type: "category",
          gridIndex: 0,
          data: ["10号线二期", "14号线", "15号线", "18号线一期"],
          axisTick: {
            alignWithLabel: true,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#A2D4E6",
            fontSize: 14,
          },
          axisLine: {
            lineStyle: {
              color: "#657CA8",
              opacity: 0.1,
            },
          },
        },
      ],
      yAxis: {
        name: "单位(km)",
        nameTextStyle: {
          color: "#A2D4E6",
          fontSize: 14,
        },
        axisLabel: {
          color: "#A2D4E6",
          fontSize: 14,
        },
        splitLine: {
          lineStyle: {
            // type: "dashed",
            color: "#657CA8",
            opacity: 0.1,
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: "盾构区间（km）",
          type: "bar",
          barWidth: "40px",
          xAxisIndex: 0,
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              barBorderRadius: [6, 6, 0, 0],
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                formatter: "{c}km",
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 14,
                },
              },
              color: function (params) {
                var colorList = [
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#0282DE",
                    },
                    {
                      offset: 1,
                      color: "#3F28D0",
                    },
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#FED701",
                    },
                    {
                      offset: 1,
                      color: "#FC9501",
                    },
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#67E0E3",
                    },
                    {
                      offset: 1,
                      color: "#0181DE",
                    },
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#FE9B1A",
                    },
                    {
                      offset: 1,
                      color: "#FE411B",
                    },
                  ]),
                ];
                return colorList[params.dataIndex];
              },
            },
            emphasis: {
              opacity: 1,
            },
          },
          data: ["6", "58", "72", "62"],
          zlevel: 11,
        },
      ],
    };
    myChartShield.setOption(option);
    window.addEventListener("resize", function () {
      myChartShield.resize();
    });
  }
}
